<template>
  <AppLayout :show-navigation="true" :use-system-navigation="false">
    <template #navbar>
      <nav-bar title="dsfdsfffd">
        <template #fixed-nav-bg="{ statusHeight, navbarHeigth }">
          <view class="bg-color"
                :style="{ height: `${statusHeight + 200}px`, paddingTop: `${statusHeight + navbarHeigth}px` }"
          >
            statusHeight=={{ statusHeight }}--navbarHeigth=={{ navbarHeigth }}
          </view>
        </template>
      </nav-bar>
    </template>
    <view class="" style="position: relative;z-index: 5;">
      <image class="logo" src="/static/logo.png" />
      <view class="text-area">
        <text class="title">
          {{ title }}
        </text>
      </view>
      <button @click="back()">
        back
      </button>
    </view>
  </AppLayout>
</template>

<script>
import NavBar from '@/mui/layouts/components/nav-bar/nav-bar.vue'
import AppLayout from '@/mui/layouts/index.vue'

export default {
  components: {
    AppLayout,
    NavBar
  },

  data() {
    return {
      title: 'Hello',
      navColor: 'rgba(250,250,250,.8)'
    }
  },
  onLoad() {
    console.log(this)
    console.log(uni.$util.query)
  },
  onPageScroll(e) {
    // this.navColor = `rgba(255, 255, 255, ${Math.min(e.scrollTop * 0.01, 1)})`
  },
  methods: {
    back() {
      uni.$util.backEmit(2, 35656)
      // uni.$util.trigger(6666)
      // uni.$util.back(1)
    }
  }
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: antiquewhite;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.bg-color {
  position: fixed;
  left: 0;
  top: 0;
  width: 780rpx;
  /* filter: blur(14px); */
  color: red;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 50%, #EAE7DF 100%),
    linear-gradient(150deg, #7CE6D8 30%, #fff1eb, #EBBFAB);
}

.text-area {
  display: flex;
  justify-content: center;
  background-color: aquamarine;
  height: 2000px;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
